<template>
  <view class="header">
    <u-navbar
      :title="title"
      :background="{ background: background }"
      :is-back="isBack"
      :is-fixed="isFixed"
      back-icon-color="auto"
      :border-bottom="borderBottom"
      @click-right="onClickRight"
      :title-color="textColor"
      @click-left="onClickLeft"
      @click.native.stop="handelSearch"
    >
      <view class="slot-wrap">
        <view class="flex Jstart Acenter main" :style="{width:icon=='long'?'100%':'90%',backgroundColor:inputColor}">
          <u-icon
            name="search"
            color="#999999"
            size="36"
            style="margin: 0 20upx"
          ></u-icon>
          <input
            style="font-size: 30upx; color: #000"
            v-model="searchText"
            placeholder="请输入搜索内容"
            @input="search"
            @confirm="inputConfirm"
          />
        </view>
        <view class="flex Acenter" v-if="icon == 'chat'">
          <u-icon
            name="chat"
            size="44"
            style="margin-left: 20upx; transform: rotateY(180deg)"
            color="#fff"
          ></u-icon>
        </view>
        <view
          class="flex Acenter cancel"
          v-if="icon == 'cancel'"
          @click="$emit('close')"
        >
          <text>取消</text>
        </view>
        <view class="flex Acenter" v-if="icon == '...'">
          <u-icon
            name=""
            size="44"
            style="margin-left: 20upx; transform: rotateY(180deg)"
          ></u-icon>
        </view>
        <view class="flex Acenter search" v-if="icon == 'search'">
          <view @click.stop="productshopListShow">
					<!-- <image @click.stop="productshopListShow" src="../../static/indexClose.png" mode=""></image> -->
          <view style="color:#ccc;font-weight:bolder;transform:translateY(-8upx)">...</view>
          </view>
          <view>
					<image  @click.stop="shopListChange" src="../../static/close.png" mode=""></image>
          </view>
        </view>
      </view>
    </u-navbar>
  </view>
</template>

<script>
export default {
  name: "header-search",
  props: {
    title: {
      type: String,
      default: "",
    },
    isBack: {
      type: Boolean,
      default: false,
    },
    isFixed: {
      type: Boolean,
      default: true,
    },
    background: {
      type: String,
      default: "#ffffff",
    },
    textColor: {
      type: String,
      default: "#323233",
    },
    borderBottom: {
      type: Boolean,
      default: true,
    },
    icon: {
      type: String,
      default: "...",
    },
    inputColor:{
      type:String,
      default:'#f6f6f6'
    }
  },
  data() {
    return {
      searchText:''
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    // 返回点击
    onClickLeft() {
      uni.navigateBack({
        delta: 1,
      });
    },
    onClickRight() {},
    //点击跳转到详情
 handelSearch() {
      let vm = this;
      vm.$emit("handelHeaderSearch", vm.searchText);
    },
    //获取输入框的值
    search(val){
      this.$emit('handleSearch',val.detail.value)
    },
    // 搜索框确认事件
    inputConfirm(){
      this.$emit('handleConfirm')
    },
    productshopListShow(){
      this.$emit('productshopListShow');
    },
    shopListChange(){
      this.$emit('shopListChange');
    }
  },
};
</script>

<style scoped lang='scss' >
.slot-wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 30upx;
  .main {
    height: 60upx;
    border-radius: 30upx;
  }
  .cancel {
    display: flex;
    align-items: center;
    text {
      width: 50upx;
      font-size: 26upx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
      line-height: 88upx;
      white-space: nowrap;
    }
  }
  .search{
        margin-left: 20upx;
				width: 134upx;
				height: 54upx;
        line-height: 54upx;
				background: #FFFFFF;
				border: 1upx solid #EEEEEE;
				border-radius: 27upx;
				display: flex;
			    align-items: center;
				justify-content: space-around;
        view{
          // width:50%;
          // height: 100%;
          // text-align: center;
      image{
        // vertical-align: middle;
          text-align: center;


      &:first-child{
      width: 26upx;
      height: 6upx;
      }
     &:last-child{
       width: 20upx;
       height: 20upx;
     }
    }
        }
    
    }
}
</style>
